<template>
  <view class="container">
    
    <Card class="form-card">
      <view class="form-group">
        <text class="label">计划标题</text>
        <input 
          class="input" 
          type="text" 
          placeholder="请输入计划标题" 
          v-model="form.title"
        />
      </view>
      
      <view class="form-group">
        <text class="label">关联学生</text>
        <picker 
          mode="selector" 
          :range="students" 
          @change="onStudentChange"
        >
          <view class="picker">
            {{ selectedStudent || '请选择关联学生' }}
          </view>
        </picker>
      </view>
      
      <view class="form-group">
        <text class="label">关联目标</text>
        <picker 
          mode="selector" 
          :range="goals" 
          @change="onGoalChange"
        >
          <view class="picker">
            {{ selectedGoal || '请选择关联目标（可选）' }}
          </view>
        </picker>
      </view>
      
      <view class="form-group">
        <text class="label">科目</text>
        <picker 
          mode="selector" 
          :range="subjects" 
          @change="onSubjectChange"
        >
          <view class="picker">
            {{ selectedSubject || '请选择科目' }}
          </view>
        </picker>
      </view>
      
      <view class="form-group">
        <text class="label">计划类型</text>
        <view class="radio-group">
          <label class="radio-item">
            <radio 
              value="daily" 
              :checked="form.planType === 'daily'" 
              @click="form.planType = 'daily'"
            /> 每日计划
          </label>
          <label class="radio-item">
            <radio 
              value="weekly" 
              :checked="form.planType === 'weekly'" 
              @click="form.planType = 'weekly'"
            /> 每周计划
          </label>
        </view>
      </view>
      
      <view class="form-group" v-if="form.planType === 'daily'">
        <text class="label">开始日期</text>
        <picker 
          mode="date" 
          :value="form.executeDate" 
          @change="onDateChange"
        >
          <view class="picker">
            {{ form.executeDate || '请选择开始日期' }}
          </view>
        </picker>
      </view>
      
      <view class="form-group" v-if="form.planType === 'weekly'">
        <text class="label">执行星期</text>
        <view class="checkbox-group">
          <label 
            v-for="(day, index) in weekDays" 
            :key="index" 
            class="checkbox-item"
          >
            <checkbox 
              :value="day.value" 
              :checked="form.weekDays.includes(day.value)"
              @click="toggleWeekDay(day.value)"
            /> {{ day.label }}
          </label>
        </view>
      </view>
      
      <view class="form-group">
        <text class="label">时间安排</text>
        <view class="time-range">
          <view class="time-picker">
            <picker 
              mode="time" 
              :value="form.startTime" 
              @change="onStartTimeChange"
            >
              <view class="picker">
                {{ form.startTime || '开始时间' }}
              </view>
            </picker>
          </view>
          <text class="separator">至</text>
          <view class="time-picker">
            <picker 
              mode="time" 
              :value="form.endTime" 
              @change="onEndTimeChange"
            >
              <view class="picker">
                {{ form.endTime || '结束时间' }}
              </view>
            </picker>
          </view>
        </view>
      </view>
      
      <view class="form-group">
        <text class="label">任务内容</text>
        <textarea 
          class="textarea" 
          placeholder="请输入具体的学习任务内容" 
          v-model="form.content"
        />
      </view>
      
      <Button 
        class="submit-btn" 
        type="primary" 
        text="创建学习计划" 
        :loading="loading"
        @click="handleSubmit"
      />
    </Card>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        title: '',
        student: '',
        goal: '',
        subject: '',
        planType: 'daily', // daily or weekly
        executeDate: '',
        weekDays: [],
        startTime: '',
        endTime: '',
        content: ''
      },
      students: ['张小明 - 小学五年级', '李小红 - 初中一年级', '王小刚 - 高中二年级'],
      selectedStudent: '',
      goals: ['提高数学成绩', '英语期末考试90分以上', '改正写字潦草'],
      selectedGoal: '',
      subjects: ['语文', '数学', '英语', '物理', '化学', '生物', '历史', '地理', '政治'],
      selectedSubject: '',
      weekDays: [
        { label: '周一', value: '1' },
        { label: '周二', value: '2' },
        { label: '周三', value: '3' },
        { label: '周四', value: '4' },
        { label: '周五', value: '5' },
        { label: '周六', value: '6' },
        { label: '周日', value: '7' }
      ],
      loading: false
    };
  },
  
  methods: {
    onStudentChange(e) {
      this.selectedStudent = this.students[e.detail.value];
      this.form.student = this.selectedStudent;
    },
    
    onGoalChange(e) {
      this.selectedGoal = this.goals[e.detail.value];
      this.form.goal = this.selectedGoal;
    },
    
    onSubjectChange(e) {
      this.selectedSubject = this.subjects[e.detail.value];
      this.form.subject = this.selectedSubject;
    },
    
    onDateChange(e) {
      this.form.executeDate = e.detail.value;
    },
    
    toggleWeekDay(value) {
      const index = this.form.weekDays.indexOf(value);
      if (index > -1) {
        this.form.weekDays.splice(index, 1);
      } else {
        this.form.weekDays.push(value);
      }
    },
    
    onStartTimeChange(e) {
      this.form.startTime = e.detail.value;
    },
    
    onEndTimeChange(e) {
      this.form.endTime = e.detail.value;
    },
    
    handleSubmit() {
      if (!this.form.title) {
        uni.showToast({
          title: '请输入计划标题',
          icon: 'none'
        });
        return;
      }
      
      if (!this.form.student) {
        uni.showToast({
          title: '请选择关联学生',
          icon: 'none'
        });
        return;
      }
      
      if (!this.form.subject) {
        uni.showToast({
          title: '请选择科目',
          icon: 'none'
        });
        return;
      }
      
      if (this.form.planType === 'daily' && !this.form.executeDate) {
        uni.showToast({
          title: '请选择执行日期',
          icon: 'none'
        });
        return;
      }
      
      if (this.form.planType === 'weekly' && this.form.weekDays.length === 0) {
        uni.showToast({
          title: '请选择执行星期',
          icon: 'none'
        });
        return;
      }
      
      if (!this.form.startTime || !this.form.endTime) {
        uni.showToast({
          title: '请选择完整的时间安排',
          icon: 'none'
        });
        return;
      }
      
      if (!this.form.content) {
        uni.showToast({
          title: '请输入任务内容',
          icon: 'none'
        });
        return;
      }
      
      // 模拟创建过程
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        uni.showToast({
          title: '创建成功',
          icon: 'success'
        });
        
        // 返回计划列表
        setTimeout(() => {
          uni.navigateBack();
        }, 1000);
      }, 1000);
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: $spacing-base;
  background-color: $background-color;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: $spacing-lg;
  padding: $spacing-xl 0;
}

.title {
  font-size: $font-size-xl;
  font-weight: bold;
  color: $text-primary;
  display: block;
  margin-bottom: $spacing-sm;
}

.subtitle {
  font-size: $font-size-sm;
  color: $text-secondary;
}

.form-card {
  margin-bottom: $spacing-lg;
}

.form-group {
  margin-bottom: $spacing-lg;
}

.label {
  display: block;
  font-size: $font-size-base;
  color: $text-primary;
  margin-bottom: $spacing-sm;
}

.input, .picker, .textarea {
  width: 100%;
  padding: $spacing-base;
  border: 1rpx solid $text-tertiary;
  border-radius: $border-radius-base;
  font-size: $font-size-base;
  box-sizing: border-box;
}

.input {
  height: 100rpx;
}

.picker {
  height: 80rpx;
  line-height: 80rpx;
  display: flex;
  align-items: center;
}

.textarea {
  height: auto;
  min-height: 140rpx;
}

.radio-group, .checkbox-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.radio-item, .checkbox-item {
  margin-right: $spacing-lg;
  margin-bottom: $spacing-sm;
  display: flex;
  flex-direction: row;
  align-items: center;
  
  radio, checkbox {
    margin-right: $spacing-xs;
  }
}

.time-range {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.time-picker {
  flex: 1;
}

.separator {
  margin: 0 $spacing-base;
  color: $text-secondary;
}

.submit-btn {
  width: inherit;
  margin-top: $spacing-xl;
}
</style>